Samples 01

<style>
  .mercium-calc-container {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f5f0e6;
    color: #1a1d2e;
    line-height: 1.5;
    padding: 20px 16px 60px;
    border-radius: 14px;
  }

  .mercium-calc-container :root {
    --bg: #f5f0e6;
    --paper: #ffffff;
    --ink: #1a1d2e;
    --ink-soft: #5a6075;
    --line: #e3dccd;
    --line-soft: #f0ebe0;
    --teal: #1f4d57;
    --gold: #b8893a;
    --gold-soft: #f5edd9;
    --shadow-sm: 0 1px 2px rgba(26, 29, 46, 0.04);
  }

  .mercium-calc-container .app { max-width: 560px; margin: 0 auto; }
  .mercium-calc-container .header { text-align: center; margin-bottom: 24px; padding: 12px 0; }
  .mercium-calc-container .brand { font-family: 'serif'; font-weight: 600; font-size: 32px; color: var(--teal); margin-bottom: 4px; }
  .mercium-calc-container .tagline { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; }
  .mercium-calc-container .card { background: #ffffff; border: 1px solid #e3dccd; border-radius: 14px; padding: 22px; box-shadow: 0 1px 2px rgba(26, 29, 46, 0.04); margin-bottom: 14px; }
  .mercium-calc-container .section-title { font-size: 18px; font-weight: 500; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
  .mercium-calc-container .section-title::before { content: ''; width: 3px; height: 16px; background: #b8893a; border-radius: 2px; }
  .mercium-calc-container .field { margin-bottom: 14px; }
  .mercium-calc-container .field label { display: block; font-size: 11px; font-weight: 600; color: #5a6075; text-transform: uppercase; margin-bottom: 6px; }
  .mercium-calc-container .field input, .mercium-calc-container .field select { width: 100%; padding: 11px 13px; border: 1px solid #e3dccd; border-radius: 8px; }
  .mercium-calc-container .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mercium-calc-container .zone-help { background: #f5edd9; border: 1px solid rgba(184, 137, 58, 0.25); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; margin-bottom: 16px; }
  .mercium-calc-container .charge-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #f0ebe0; }
  .mercium-calc-container .counter { display: flex; align-items: center; gap: 2px; background: #f5f0e6; border-radius: 10px; padding: 4px; }
  .mercium-calc-container .counter button { width: 32px; height: 32px; border: none; cursor: pointer; background: #fff; color: #1f4d57; font-weight: bold; }
  .mercium-calc-container .total-card { background: #1a1d2e; color: #ffffff; border-radius: 14px; padding: 24px; text-align: center; margin-top: 20px; }
  .mercium-calc-container .total-amount { font-size: 52px; font-weight: 500; }
  .mercium-calc-container .btn-primary { background: #1f4d57; color: white; padding: 14px 20px; border-radius: 10px; border: none; cursor: pointer; width: 100%; margin-top: 10px; }
  
  @media (max-width: 480px) { .mercium-calc-container .row { grid-template-columns: 1fr; } }
</style>

<div class="mercium-calc-container">
  <div class="app">
    <header class="header">
      <div class="brand">Mercium</div>
      <div class="tagline">Runner Service Calculator · Mengliat</div>
    </header>

    <div class="card">
      <h2 class="section-title">Job Details</h2>
      <div class="row">
        <div class="field">
          <label>Date</label>
          <input type="date" id="kb_date">
        </div>
        <div class="field">
          <label>Runner Name</label>
          <input type="text" id="kb_runner" placeholder="Ahmad">
        </div>
      </div>
      <div class="field">
        <label>Destination</label>
        <input type="text" id="kb_destination" placeholder="Jerudong, Bandar, Gadong">
      </div>
    </div>

    <div class="card">
      <h2 class="section-title">Charges</h2>
      <div class="field">
        <label>Trip Zone</label>
        <select id="kb_zone" onchange="kb_updateTotal()">
          <option value="3">Zone 1 — B$3.00</option>
          <option value="5">Zone 2 — B$5.00</option>
          <option value="8">Zone 3 — B$8.00</option>
        </select>
      </div>

      <div class="zone-help">
        <strong>Zone 1:</strong> Bandar, Gadong, Berakas, Rimba<br>
        <strong>Zone 2:</strong> Jerudong, Sengkurong<br>
        <strong>Zone 3:</strong> Muara, Tutong town
      </div>

      <div class="charge-row">
        <span>Drop back to office (+B$1.00)</span>
        <div class="counter">
          <button onclick="kb_updateCount('office', -1)">-</button>
          <span style="padding:0 10px" id="kb_count_office">0</span>
          <button onclick="kb_updateCount('office', 1)">+</button>
        </div>
      </div>
    </div>

    <div class="total-card">
      <div style="font-size: 11px; opacity: 0.7;">TOTAL AMOUNT</div>
      <div class="total-amount">B$<span id="kb_total">3.00</span></div>
    </div>

    <button class="btn-primary" onclick="window.print()">Print Receipt</button>
  </div>
</div>

<script>
  var kb_counts = { office: 0 };
  
  function kb_updateCount(key, delta) {
    kb_counts[key] = Math.max(0, kb_counts[key] + delta);
    document.getElementById('kb_count_' + key).innerText = kb_counts[key];
    kb_updateTotal();
  }

  function kb_updateTotal() {
    var base = parseFloat(document.getElementById('kb_zone').value);
    var total = base + (kb_counts.office * 1.00);
    document.getElementById('kb_total').innerText = total.toFixed(2);
  }

  // Set default date
  document.getElementById('kb_date').valueAsDate = new Date();
</script>