/* ============================================================================
   NSBC SQUARE PAYMENT - COMPLETE CSS STYLING
   For payment calculator, card form, and PrePay checkbox
   ============================================================================ */

/* Payment Calculator */
.payment-calculator {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.payment-calculator-title {
  font-size: 1.3em;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

.payment-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.payment-breakdown-row.payment-total-row {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 2px solid #dee2e6;
  font-weight: 700;
  font-size: 1.1em;
}

.payment-breakdown-label {
  color: #495057;
  font-size: 1em;
}

.payment-breakdown-amount {
  color: #2c3e50;
  font-weight: 600;
  font-size: 1.1em;
  min-width: 80px;
  text-align: right;
}

.payment-total-row .payment-breakdown-amount {
  color: #0066cc;
  font-size: 1.3em;
}

/* Card Charge Notice */
.card-charge-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 15px;
  margin: 20px 0;
  text-align: center;
  font-size: 1.05em;
  color: #856404;
}

.card-charge-notice strong {
  color: #0066cc;
  font-size: 1.2em;
}

/* Square Card Container */
#card-container {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

/* PrePay Checkbox Styling */
.webform-element--type-checkbox.prepay-topup,
.webform-element--type-checkbox[class*="prepay"],
.form-item-prepay-topup,
.form-item[class*="prepay"] {
  background: #e7f3ff;
  border: 2px solid #0066cc;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.webform-element--type-checkbox.prepay-topup label,
.webform-element--type-checkbox[class*="prepay"] label,
.form-item-prepay-topup label,
.form-item[class*="prepay"] label {
  font-size: 1.1em;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.webform-element--type-checkbox.prepay-topup input[type="checkbox"],
.webform-element--type-checkbox[class*="prepay"] input[type="checkbox"],
.form-item-prepay-topup input[type="checkbox"],
.form-item[class*="prepay"] input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  cursor: pointer;
}

.webform-element--type-checkbox.prepay-topup .description,
.webform-element--type-checkbox[class*="prepay"] .description,
.form-item-prepay-topup .description,
.form-item[class*="prepay"] .description {
  margin-top: 10px;
  padding: 12px;
  background: white;
  border-radius: 4px;
  font-size: 0.95em;
  line-height: 1.6;
  color: #495057;
}

/* Payment Status Messages */
#payment-status-message {
  padding: 15px;
  margin: 20px 0;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 500;
}

/* Animation for amount changes */
@keyframes highlight {
  0% { background-color: #fff3cd; }
  100% { background-color: transparent; }
}

.payment-breakdown-amount.amount-changed {
  animation: highlight 0.5s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .payment-calculator {
    padding: 15px;
  }
  
  .payment-calculator-title {
    font-size: 1.1em;
  }
  
  .payment-breakdown-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .payment-breakdown-amount {
    text-align: left;
    font-size: 1.2em;
  }
}
.webform-custom-options-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.webform-custom-options-button {
  flex: 1;
  display: table-cell;
  margin: 0 5px 10px 5px;
  border: 3px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  color: #666;
}

.webform-custom-options-button .description {
  font-size: .8em;
}

.webform-custom-options-button[data-option-value]:hover {
  border-color: #999;
  color: #333;
}

.webform-custom-options-button[data-option-value]:focus {
  border-color: #999;
  color: #333;
}

.webform-custom-options-button[data-option-value][aria-checked=true] {
  border-color: #0074bd;
  color: #000;
}

.webform-custom-options-button[data-option-value][aria-checked=true]:focus {
  box-shadow: 0 0 5px #0074bd;
}

.webform-custom-options-button[data-option-value][aria-disabled=true],
.webform-custom-options-button[data-option-value][aria-disabled=true]:hover,
.webform-custom-options-button[data-option-value][aria-disabled=true]:focus {
  cursor: not-allowed;
  border-color: #ccc;
  color: #999;
}

@media (max-width: 600px) {
  .webform-custom-options-buttons {
    display: block;
    margin: 0;
  }

  .webform-custom-options-button {
    display: block;
    margin: 5px 0;
  }
}