{% extends 'base.html' %}{% load static %}
{% block title %}{{ service.name }} — Unity Nation{% endblock %}
{% block extra_css %}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:720px){.pd-grid{grid-template-columns:1fr}}
.pd-img{background:linear-gradient(135deg,#1a1a3a,#0d0e1e);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center;font-size:5rem;position:relative}
.pd-img img{width:100%;height:auto;display:block}
.pd-badge{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:1px solid rgba(166,136,255,.3);color:var(--vlt);border-radius:100px;padding:4px 12px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pd-price{font-family:var(--ff);font-size:2.4rem;font-weight:800;color:var(--teal);line-height:1;margin-bottom:20px}
.pd-desc{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r);padding:16px;font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:18px}
.pd-meta-row{display:flex;align-items:center;gap:9px;padding:9px 13px;background:rgba(255,255,255,.03);border-radius:9px;font-size:.84rem;color:var(--muted);margin-bottom:8px}
.pd-meta-row i{color:var(--vlt);width:16px;flex-shrink:0}
.bal-note{background:rgba(0,200,168,.07);border:1px solid rgba(0,200,168,.2);border-radius:9px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:.84rem}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div style="margin-bottom:20px"><a href="{% url 'marketplace' %}" style="color:var(--muted);font-size:.83rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px"><i class="fas fa-arrow-left"></i>Back to Marketplace</a></div>
<div class="pd-grid">
  <div class="pd-img">
    <span class="pd-badge"><i class="fas fa-bolt"></i> Service</span>
    {% if service.image %}<img src="{{ service.image.url }}" alt="{{ service.name }}">{% else %}⚡{% endif %}
  </div>
  <div>
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--vlt);margin-bottom:9px">By <a href="{% url 'merchant_detail' service.merchant.id %}" style="color:var(--vlt);text-decoration:none">{{ service.merchant.business_name }}</a></div>
    <h1 style="font-family:var(--ff);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.025em;margin-bottom:14px">{{ service.name }}</h1>
    <div class="pd-price">${{ service.price }}</div>
    <div class="pd-desc">{{ service.description }}</div>
    {% if service.delivery_time %}<div class="pd-meta-row"><i class="fas fa-clock"></i><span>Delivery: {{ service.delivery_time }}</span></div>{% endif %}
    {% if service.category %}<div class="pd-meta-row"><i class="fas fa-tag"></i><span>{{ service.category }}</span></div>{% endif %}
    <div class="bal-note">
      <span style="color:var(--muted)">Your wallet balance</span>
      <strong style="font-family:var(--ff);color:var(--teal);font-size:1.1rem">${{ user.wallet_balance|floatformat:2 }}</strong>
    </div>
    <a href="{% url 'purchase_service' service.id %}" class="btn btn-violet btn-block btn-lg" style="margin-bottom:10px"><i class="fas fa-bolt"></i>Order Service — ${{ service.price }}</a>
    <a href="{% url 'merchant_detail' service.merchant.id %}" class="btn btn-ghost btn-block btn-sm"><i class="fas fa-store"></i>View All from {{ service.merchant.business_name }}</a>
  </div>
</div>
</div>
{% endblock %}