/* ══════════════════════════════════════════════════════════════
   PAGE: Pay Bill
   ══════════════════════════════════════════════════════════════ */

.pay-bill-container { max-width: 680px; margin: 0 auto; }

.pay-bill-card {
  background: var(--white); border-radius: var(--radius); padding: 48px;
  text-align: center; border: 1px solid var(--gray-200);
}

.pay-bill-icon {
  width: 72px; height: 72px; margin: 0 auto 24px;
  background: rgba(245,197,24,0.12); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.pay-bill-icon svg { width: 36px; height: 36px; color: var(--yellow); }

.pay-bill-card h2 { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.pay-bill-card p { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }

.pay-bill-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; font-size: 17px;
}

.pay-bill-options { margin-top: 40px; }
.pay-bill-options h3 { font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: 20px; }

.pay-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pay-option {
  background: var(--white); border-radius: var(--radius-sm); padding: 28px;
  border: 1px solid var(--gray-200);
}

.pay-option-icon {
  width: 44px; height: 44px; background: rgba(245,197,24,0.12);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pay-option-icon svg { width: 22px; height: 22px; color: var(--yellow); }
.pay-option h4 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.pay-option p { font-size: 14px; color: var(--gray-600); line-height: 1.6; }
.pay-option a { color: var(--navy); font-weight: 500; }
.pay-option a:hover { color: var(--yellow); }

@media (max-width: 640px) {
  .pay-bill-card { padding: 32px 24px; }
  .pay-options-grid { grid-template-columns: 1fr; }
}