:root {
      --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --color-text-primary: #1a1a1a;
      --color-text-secondary: #666;
      --color-text-tertiary: #999;
      --color-text-success: #28a745;
      --color-text-info: #0d6efd;
      --color-background-primary: #fff;
      --color-background-secondary: #f8f9fa;
      --color-background-tertiary: #e9ecef;
      --color-background-info: #e7f1ff;
      --color-border-primary: #0d6efd;
      --color-border-secondary: #dee2e6;
      --color-border-tertiary: #e9ecef;
      --color-border-info: #b6d4fe;
      --border-radius-md: 8px;
      --border-radius-lg: 12px;
    }
    
    body {
      font-family: var(--font-sans);
      background-color: #f5f7fa;
      color: var(--color-text-primary);
    }
    
    .page {
      max-width: 700px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    
    .page-title {
      font-size: 1.375rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
    }
    
    .page-sub {
      font-size: 0.875rem;
      color: var(--color-text-secondary);
      margin-bottom: 2rem;
    }
    
    .card-custom {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      padding: 1.5rem;
      margin-bottom: 1.25rem;
      background: var(--color-background-primary);
    }
    
    .section-label {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--color-text-secondary);
      letter-spacing: 0.06em;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 0.5px solid var(--color-border-tertiary);
      display: flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
    }
    
    .form-label-custom {
      font-size: 0.75rem;
      color: var(--color-text-secondary);
      margin-bottom: 0.25rem;
    }
    
    .form-control-custom {
      height: 42px;
      padding: 0 12px;
      font-size: 0.875rem;
      border: 0.5px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      background: var(--color-background-secondary);
      color: var(--color-text-primary);
      text-align: right;
      transition: border-color 0.15s, background 0.15s;
    }
    
    .form-control-custom:focus {
      border-color: var(--color-border-primary);
      background: var(--color-background-primary);
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    }
    
    .form-control-custom::placeholder {
      color: var(--color-text-tertiary);
      font-size: 0.8125rem;
    }
    
    /* Payment tabs */
    .pay-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 1.25rem;
    }
    
    .pay-tab {
      border: 0.5px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: var(--color-background-secondary);
      position: relative;
      cursor: default;
      transition: all 0.2s;
    }
    
    .pay-tab.active {
      border: 1.5px solid var(--color-text-primary);
      background: var(--color-background-primary);
      cursor: default;
    }
    
    .pay-tab.disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }
    
    .pay-tab-label {
      font-size: 0.6875rem;
      color: var(--color-text-secondary);
      text-align: center;
    }
    
    .pay-tab.active .pay-tab-label {
      color: var(--color-text-primary);
      font-weight: 500;
    }
    
    .pay-tab .check {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--color-text-primary);
      position: absolute;
      top: 6px;
      left: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .disabled-badge {
      position: absolute;
      top: 5px;
      left: 5px;
      background: var(--color-background-tertiary);
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: 4px;
      font-size: 0.5625rem;
      padding: 1px 5px;
      color: var(--color-text-tertiary);
      white-space: nowrap;
    }
    
    /* Card brands */
    .brands {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    
    .brand-pill {
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      border: 0.5px solid var(--color-border-tertiary);
      background: var(--color-background-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6875rem;
      font-weight: 700;
    }
    
    /* Summary */
    .summary {
      background: var(--color-background-secondary);
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      padding: 1.25rem;
      margin-bottom: 1.25rem;
    }
    
    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
      color: var(--color-text-secondary);
      padding: 5px 0;
    }
    
    .summary-row.free {
      color: var(--color-text-success);
    }
    
    .summary-row.total {
      font-size: 1rem;
      font-weight: 500;
      color: var(--color-text-primary);
      margin-top: 10px;
      padding-top: 12px;
      border-top: 0.5px solid var(--color-border-tertiary);
    }
    
    /* Pay button */
    .btn-pay {
      width: 100%;
      height: 50px;
      border-radius: var(--border-radius-md);
      background: var(--color-text-primary);
      color: var(--color-background-primary);
      font-size: 0.9375rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: opacity 0.15s;
    }
    
    .btn-pay:hover {
      opacity: 0.82;
      color: var(--color-background-primary);
    }
    
    .secure-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    
    .secure-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.6875rem;
      color: var(--color-text-tertiary);
    }
    
    .alert-custom {
      background: var(--color-background-info);
      border: 0.5px solid var(--color-border-info);
      border-radius: var(--border-radius-md);
      padding: 10px 12px;
      margin-bottom: 1rem;
      font-size: 0.75rem;
      color: var(--color-text-info);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    @media (max-width: 576px) {
      .pay-tabs {
        grid-template-columns: 1fr;
      }
      .cc-row2,
      .field-group.cols-2 {
        grid-template-columns: 1fr !important;
      }
    }

    /* Spinner Animation */
    .spinner {
      display: none;
      width: 18px;
      height: 18px;
      animation: spin 1.2s linear infinite;
      vertical-align: middle;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* Button loading state */
    .btn-pay.loading {
      opacity: 0.85;
      cursor: wait;
      pointer-events: none;
    }

    .btn-pay.loading .btn-text {
      opacity: 0.7;
    }

    .btn-pay.loading .spinner {
      display: inline-block;
    }