{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Confirmed | MISRY AYUR</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{--black:#090704;--gold:#C9A84C;--gold-light:#E8C96A;--cream:#F8F0DC;--line:rgba(201,168,76,.18)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 70% 20%,rgba(201,168,76,.12),transparent 34%),var(--black);color:var(--cream);font-family:"Nunito Sans",sans-serif;display:grid;place-items:center;padding:1rem}.panel{width:min(860px,100%);border:1px solid var(--line);border-radius:20px;background:rgba(13,9,5,.94);box-shadow:0 30px 90px rgba(0,0,0,.55);padding:clamp(1.2rem,4vw,2.4rem)}.logo{width:120px;height:auto;margin-bottom:1rem}h1{font-family:Cinzel,serif;color:var(--gold-light);font-size:clamp(1.8rem,5vw,3rem);margin:.2rem 0}.muted{color:rgba(248,240,220,.62);line-height:1.8}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.4rem 0}.item{border:1px solid var(--line);border-radius:10px;padding:.9rem;background:rgba(201,168,76,.05)}.item span{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,240,220,.46);margin-bottom:.25rem}.item strong{color:var(--gold-light)}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:.95rem 1.35rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.primary{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--black)}.ghost{border:1px solid var(--line);color:var(--gold-light)}@media(max-width:640px){.grid{grid-template-columns:1fr}.actions .btn{width:100%}}
</style>
</head>
<body>
<main class="panel">
  <img class="logo" src="{% static 'orders/assets/misry-ayur-logo-gold.png' %}" alt="MISRY AYUR">
  <h1>Order Placed</h1>
  <p class="muted">Thank you. Your MISRY AYUR order has been saved. Please use WhatsApp for payment and confirmation support.</p>
  <section class="grid" aria-label="Order summary">
    <div class="item"><span>Order ID</span><strong>{{ order.order_id }}</strong></div>
    <div class="item"><span>Product</span><strong>{{ product_name }} · {{ product_weight }}</strong></div>
    <div class="item"><span>Quantity</span><strong>{{ order.quantity }}</strong></div>
    <div class="item"><span>Total</span><strong>₹{{ order.total_amount }}</strong></div>
    <div class="item"><span>Payment</span><strong>{{ order.payment_method }}</strong></div>
    <div class="item"><span>Shipping</span><strong>{{ shipping_text }}</strong></div>
    <div class="item"><span>Name</span><strong>{{ order.full_name }}</strong></div>
    <div class="item"><span>Phone</span><strong>{{ order.phone }}</strong></div>
  </section>
  <p class="muted">Support / WhatsApp: {{ support_phone }}. COD is not available. Payment is by UPI, bank transfer, or WhatsApp order confirmation.</p>
  <div class="actions">
    <a class="btn primary" href="{{ whatsapp_url }}" target="_blank" rel="noopener">Send on WhatsApp</a>
    <a class="btn ghost" href="{% url 'orders:invoice_pdf' order.order_id %}">Download Invoice</a>
    <a class="btn ghost" href="{% url 'orders:home' %}">Back to Site</a>
  </div>
</main>
</body>
</html>
