*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: #f5f6fa;
      color: #30313d;
      min-height: 100vh;
    }

    /* -- Header -- */
    .header {
      background: #fff;
      border-bottom: 1px solid #e0e3eb;
      padding: 16px 40px;
    }
    .header img { height: 48px; }

    /* -- Layout -- */
    .container {
      max-width: 980px;
      margin: 40px auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 32px;
      align-items: start;
    }
    @media (max-width: 700px) {
      .container { grid-template-columns: 1fr; }
    }

    /* -- Summary panel (left) -- */
    .summary {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e0e3eb;
    }
    .summary-header {
      background: #4a90d9;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      padding: 14px 20px;
    }
    .summary-body { padding: 20px; }
    .summary-product-name { font-weight: 700; font-size: 15px; }
    .summary-product-price { font-size: 15px; float: right; }
    .summary-product-desc { font-size: 13px; color: #6b7280; margin-top: 8px; }
    .summary-divider { border: none; border-top: 1px solid #e0e3eb; margin: 16px 0; }
    .summary-total { font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; }

    .summary-note {
      background: #fff;
      border: 1px solid #e0e3eb;
      border-radius: 8px;
      padding: 20px;
      margin-top: 16px;
      font-size: 13px;
      color: #374151;
      line-height: 1.6;
    }
    .summary-note a { color: #4a90d9; text-decoration: none; }

    /* -- Checkout panel (right) -- */
    .checkout-panel {
      background: #fff;
      border-radius: 8px;
      padding: 28px;
      border: 1px solid #e0e3eb;
    }
    .section-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
      color: #111827;
    }

    /* Contact fields */
    .field-row { display: flex; gap: 16px; }
    .field-row .field { flex: 1; }
    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #374151; }
    .field label .required { color: #e53e3e; }
    .field input, .field select {
      width: 100%;
      border: 1px solid #d1d5db;
      border-radius: 5px;
      padding: 10px 12px;
      font-size: 14px;
      color: #30313d;
      outline: none;
      transition: border-color .2s;
    }
    .field input:focus, .field select:focus { border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74,144,217,.15); }

    /* Payment section title */
    .payment-title { font-size: 20px; font-weight: 700; margin: 24px 0 16px; color: #111827; }

    /* Stripe Elements mount point */
    #payment-element { margin-bottom: 20px; }

    /* Error display */
    #error-message {
      color: #e53e3e;
      font-size: 13px;
      margin-bottom: 12px;
      display: none;
    }

    /* Pay button */
    #pay-button {
      width: 100%;
      background: #4a90d9;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 15px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s, transform .1s;
    }
    #pay-button:hover:not(:disabled) { background: #2f78c5; }
    #pay-button:active:not(:disabled) { transform: scale(.98); }
    #pay-button:disabled { opacity: .7; cursor: not-allowed; }

    /* TLS badge */
    .tls-badge {
      text-align: center;
      font-size: 12px;
      color: #9ca3af;
      margin-top: 16px;
    }
    .tls-badge svg { vertical-align: middle; margin-right: 4px; }

    /* Footer */
    .footer {
      text-align: center;
      font-size: 12px;
      color: #9ca3af;
      margin-top: 40px;
      padding-bottom: 32px;
    }
    .footer a { color: #4a90d9; text-decoration: none; }

    /* Loading overlay */
    #loading {
      text-align: center;
      padding: 40px 0;
      color: #6b7280;
      font-size: 14px;
    }
    #checkout-form { display: none; }