/*!
 * Formpay - UI Kit (Components)
 * Scope: Namespaced component styles + safe WP Admin mappings
 * Depends on: assets/css/ui-kit.css (tokens & base)
 * Note: Pure CSS only. Removed any non-standard properties (e.g., "composes").
 */

/* Buttons: base styles for formpay and WP core buttons within formpay scope */
.formpay-ui .formpay-ui-btn,
.formpay-ui .button,
.formpay-ui a.button,
.formpay-ui .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* 44px minimum touch target */
  min-width: 2.75rem; /* Ensure square touch targets */
  padding-inline: 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-formpay-border);
  background: var(--accent);
  color: var(--foreground);
  font-weight: var(--formpay-font-weight-medium);
  box-shadow: var(--formpay-shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.02s ease;
  position: relative;
}
.formpay-ui .formpay-ui-btn:hover,
.formpay-ui .button:hover,
.formpay-ui a.button:hover,
.formpay-ui .button-secondary:hover {
  background: color-mix(in oklab, var(--accent) 85%, black 15%);
}
.formpay-ui .formpay-ui-btn:active,
.formpay-ui .button:active,
.formpay-ui a.button:active,
.formpay-ui .button-secondary:active {
  transform: translateY(0.5px);
}

/* Enhanced focus styles for accessibility */
.formpay-ui .formpay-ui-btn:focus-visible,
.formpay-ui .button:focus-visible,
.formpay-ui a.button:focus-visible,
.formpay-ui .button-secondary:focus-visible {
  outline: 2px solid var(--color-formpay-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.formpay-ui .formpay-ui-btn[disabled],
.formpay-ui .formpay-ui-btn:disabled,
.formpay-ui .button[disabled],
.formpay-ui .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button variants */
.formpay-ui .formpay-ui-btn--primary,
.formpay-ui .button-primary,
.formpay-ui .page-title-action {
  background: var(--formpay-action-green);
  color: var(--formpay-action-green-contrast);
  border-color: color-mix(in oklab, var(--formpay-action-green) 70%, black 30%);
}
.formpay-ui .formpay-ui-btn--primary:hover,
.formpay-ui .button-primary:hover,
.formpay-ui .page-title-action:hover {
  background: var(--formpay-action-green-dark);
}

.formpay-ui .formpay-ui-btn--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.formpay-ui .formpay-ui-btn--outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--color-formpay-border);
}

.formpay-ui .formpay-ui-btn--ghost {
  background: transparent;
  color: var(--foreground);
  border-color: transparent;
}

.formpay-ui .formpay-ui-btn--destructive {
  background: var(--color-formpay-danger);
  color: #fff;
  border-color: color-mix(in oklab, var(--color-formpay-danger) 70%, black 30%);
}

/* Gradient button variant to match header/section accents */
.formpay-ui .formpay-ui-btn--gradient {
  background: var(--formpay-gradient-primary);
  color: #fff;
  border-color: transparent;
}
.formpay-ui .formpay-ui-btn--gradient:hover {
  filter: brightness(0.98);
}

/* Button sizes */
.formpay-ui .formpay-ui-btn--sm { height: 2rem; padding-inline: 0.625rem; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.formpay-ui .formpay-ui-btn--md { height: 2.375rem; padding-inline: 0.875rem; }
.formpay-ui .formpay-ui-btn--lg { height: 2.75rem; padding-inline: 1rem; border-radius: var(--radius-lg); font-size: var(--text-lg); }
.formpay-ui .formpay-ui-btn--icon { width: 2.375rem; height: 2.375rem; padding: 0; }

/* Tabs */
.formpay-ui .formpay-ui-tabs { display: block; }
.formpay-ui .formpay-ui-tabs__list {
  display: flex;
  gap: var(--formpay-space-2);
  border-bottom: 1px solid var(--color-formpay-border);
  margin-bottom: var(--formpay-space-3);
}
.formpay-ui .formpay-ui-tabs__tab {
  height: 2.5rem; /* Larger touch target */
  min-width: 44px; /* Minimum touch target */
  padding-inline: 0.875rem;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--formpay-font-weight-medium);
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}

.formpay-ui .formpay-ui-tabs__tab:hover {
  background: var(--color-formpay-light-bg);
}

.formpay-ui .formpay-ui-tabs__tab:focus-visible {
  outline: 2px solid var(--color-formpay-primary);
  outline-offset: -2px;
  background: var(--color-formpay-light-bg);
}

.formpay-ui .formpay-ui-tabs__tab[aria-selected="true"],
.formpay-ui .formpay-ui-tabs__tab[data-state="active"] {
  border-bottom-color: var(--color-formpay-primary);
  color: var(--color-formpay-primary);
  font-weight: 600;
}
.formpay-ui .formpay-ui-tabs__panel { display: none; }
.formpay-ui .formpay-ui-tabs__panel[data-state="active"] { display: block; }

/* Cards */
.formpay-ui .formpay-ui-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius);
  box-shadow: var(--formpay-shadow-sm);
  overflow: hidden;
}
.formpay-ui .formpay-ui-card__header {
  padding: var(--formpay-space-4);
  border-bottom: 1px solid var(--color-formpay-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--formpay-space-3);
}
.formpay-ui .formpay-ui-card__title {
  font-size: var(--text-lg);
  font-weight: var(--formpay-font-weight-medium);
  color: var(--color-formpay-dark-text);
  margin: 0;
}
.formpay-ui .formpay-ui-card__desc {
  font-size: var(--text-sm);
  color: var(--color-formpay-medium-text);
  margin: 0;
}
.formpay-ui .formpay-ui-card__action { display: inline-flex; gap: var(--formpay-space-2); }
.formpay-ui .formpay-ui-card__content { padding: var(--formpay-space-4); }
.formpay-ui .formpay-ui-card__footer {
  padding: var(--formpay-space-3) var(--formpay-space-4);
  border-top: 1px solid var(--color-formpay-border);
}

/* Badges: base */
.formpay-ui .formpay-ui-badge,
.formpay-ui .formpay-status-badge,
.formpay-ui .formpay-status-completed,
.formpay-ui .formpay-status-pending,
.formpay-ui .formpay-status-processing,
.formpay-ui .formpay-status-failed,
.formpay-ui .formpay-status-cancelled {
  display: inline-block;
  padding: 0.375rem 0.625rem; /* Larger for better touch */
  min-height: 32px; /* Minimum touch target */
  border-radius: 999px;
  font-size: 0.75rem; /* Slightly larger */
  font-weight: var(--formpay-font-weight-medium);
  line-height: 1.4;
  border: 1px solid var(--color-formpay-border);
  background: var(--color-formpay-light-bg);
  color: var(--color-formpay-dark-text);
  white-space: nowrap;
}

/* Badge modifiers (palette aligned with new designs) */
.formpay-ui .formpay-ui-badge--success,
.formpay-ui .formpay-status-completed { background: var(--formpay-status-success-bg); color: var(--formpay-status-success-fg); border-color: var(--formpay-status-success-brd); }
.formpay-ui .formpay-ui-badge--warning,
.formpay-ui .formpay-status-pending { background: var(--formpay-status-warning-bg); color: var(--formpay-status-warning-fg); border-color: var(--formpay-status-warning-brd); }
.formpay-ui .formpay-ui-badge--danger,
.formpay-ui .formpay-status-failed { background: var(--formpay-status-danger-bg); color: var(--formpay-status-danger-fg); border-color: var(--formpay-status-danger-brd); }
.formpay-ui .formpay-ui-badge--info,
.formpay-ui .formpay-status-processing { background: var(--formpay-status-info-bg); color: var(--formpay-status-info-fg); border-color: var(--formpay-status-info-brd); }
.formpay-ui .formpay-ui-badge--neutral,
.formpay-ui .formpay-status-cancelled { background: var(--formpay-status-neutral-bg); color: var(--formpay-status-neutral-fg); border-color: var(--formpay-status-neutral-brd); }

/* Tables: enhance WP list table visuals within formpay scope */
.formpay-ui .wp-list-table {
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.formpay-ui .wp-list-table thead tr {
  background: var(--formpay-gradient-primary);
}
.formpay-ui .wp-list-table thead th {
  background: transparent;
  color: #ffffff;
  font-weight: var(--formpay-font-weight-medium);
  border-bottom: 1px solid color-mix(in oklab, #9b59f5 40%, var(--color-formpay-border) 60%);
}
.formpay-ui .wp-list-table tbody td {
  color: var(--color-formpay-dark-text);
}

/* Improved stripes & hover to match UI */
.formpay-ui .wp-list-table.striped tbody tr:nth-child(odd) {
  background: color-mix(in oklab, var(--color-formpay-light-bg) 85%, white 15%);
}
.formpay-ui .wp-list-table.striped tbody tr:hover {
  background: color-mix(in oklab, var(--color-formpay-light-bg) 80%, #fefefe 20%);
}
.formpay-ui .tablenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: var(--formpay-space-3);
}
.formpay-ui .tablenav .actions select,
.formpay-ui .tablenav .actions input[type="date"] {
  background: var(--input-background);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius-sm);
  padding: var(--formpay-space-2) var(--formpay-space-3);
}

/* Forms: normalize inputs within formpay scope */
.formpay-ui .form-table th {
  color: var(--color-formpay-dark-text);
}
.formpay-ui .form-table td .regular-text,
.formpay-ui .form-table td input[type="text"],
.formpay-ui .form-table td input[type="password"],
.formpay-ui .form-table td select,
.formpay-ui .form-table td textarea {
  background: var(--input-background);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius-sm);
  padding: var(--formpay-space-2) var(--formpay-space-3);
}

/* Alerts */
.formpay-ui .formpay-ui-alert {
  padding: var(--formpay-space-3);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius);
  background: var(--color-formpay-light-bg);
  color: var(--color-formpay-dark-text);
}
.formpay-ui .formpay-ui-alert--success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.formpay-ui .formpay-ui-alert--warning { background: #fff3cd; color: #856404; border-color: #ffeeba; }
.formpay-ui .formpay-ui-alert--danger  { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.formpay-ui .formpay-ui-alert--info    { background: #cce5ff; color: #004085; border-color: #b8daff; }

/* Payment Result Page Styles */
.formpay-ui .formpay-payment-result {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--formpay-space-4);
}

.formpay-ui .formpay-payment-result-card {
  margin-bottom: var(--formpay-space-4);
}

.formpay-ui .formpay-payment-status {
  display: flex;
  align-items: center;
  gap: var(--formpay-space-3);
  margin-bottom: var(--formpay-space-4);
}

.formpay-ui .formpay-payment-icon {
  font-size: var(--text-xl);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-formpay-light-bg);
  border: 2px solid var(--color-formpay-border);
}

.formpay-ui .formpay-payment-success .formpay-payment-icon {
  background: var(--formpay-status-success-bg);
  border-color: var(--formpay-status-success-brd);
  color: var(--formpay-status-success-fg);
}

.formpay-ui .formpay-payment-error .formpay-payment-icon {
  background: var(--formpay-status-danger-bg);
  border-color: var(--formpay-status-danger-brd);
  color: var(--formpay-status-danger-fg);
}

.formpay-ui .formpay-payment-pending .formpay-payment-icon {
  background: var(--formpay-status-warning-bg);
  border-color: var(--formpay-status-warning-brd);
  color: var(--formpay-status-warning-fg);
}

/* Receipt Table Styles */
.formpay-ui .formpay-receipt-title,
.formpay-ui .formpay-details-title {
  font-size: var(--text-lg);
  font-weight: var(--formpay-font-weight-medium);
  color: var(--color-formpay-dark-text);
  margin: var(--formpay-space-4) 0 var(--formpay-space-3);
  padding-bottom: var(--formpay-space-2);
  border-bottom: 2px solid var(--color-formpay-border);
}

.formpay-ui .formpay-receipt-table,
.formpay-ui .formpay-details-table,
.formpay-ui .formpay-unified-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--formpay-space-4);
  background: var(--card);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--formpay-shadow-sm);
}

.formpay-ui .formpay-receipt-table tbody,
.formpay-ui .formpay-details-table tbody,
.formpay-ui .formpay-unified-table tbody {
  background: var(--card);
}

.formpay-ui .formpay-receipt-row,
.formpay-ui .formpay-detail-row,
.formpay-ui .formpay-unified-row {
  border-bottom: 1px solid var(--color-formpay-border);
}

.formpay-ui .formpay-receipt-row:last-child,
.formpay-ui .formpay-detail-row:last-child,
.formpay-ui .formpay-unified-row:last-child {
  border-bottom: none;
}

.formpay-ui .formpay-receipt-label,
.formpay-ui .formpay-detail-label,
.formpay-ui .formpay-unified-label {
  padding: var(--formpay-space-3) var(--formpay-space-4);
  font-weight: var(--formpay-font-weight-medium);
  color: var(--color-formpay-dark-text);
  background: var(--color-formpay-light-bg);
  width: 40%;
  vertical-align: top;
  text-align: left;
}

.formpay-ui .formpay-receipt-value,
.formpay-ui .formpay-detail-value,
.formpay-ui .formpay-unified-value {
  padding: var(--formpay-space-3) var(--formpay-space-4);
  color: var(--color-formpay-medium-text);
  background: var(--card);
}

/* Special styling for amount row */
.formpay-ui .formpay-amount-row .formpay-receipt-label,
.formpay-ui .formpay-amount-row .formpay-receipt-value {
  font-weight: var(--formpay-font-weight-medium);
  color: var(--color-formpay-success);
}

.formpay-ui .formpay-amount-value {
  font-size: var(--text-lg);
  font-weight: var(--formpay-font-weight-medium);
}

/* Transaction ID styling */
.formpay-ui .formpay-transaction-id {
  font-family: monospace;
  font-size: var(--text-sm);
  background: var(--color-formpay-light-bg);
  padding: var(--formpay-space-1) var(--formpay-space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-formpay-border);
}

/* Gateway name styling */
.formpay-ui .formpay-gateway-name {
  font-weight: var(--formpay-font-weight-medium);
  color: var(--color-formpay-primary);
}

/* Print Styles */
@media print {
  .formpay-ui .formpay-payment-result {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .formpay-ui .formpay-ui-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .formpay-ui .formpay-print-receipt {
    display: none !important;
  }

  .formpay-ui .formpay-receipt-title,
  .formpay-ui .formpay-details-title {
    color: #000 !important;
    border-bottom-color: #000 !important;
  }

  .formpay-ui .formpay-receipt-label,
  .formpay-ui .formpay-detail-label,
  .formpay-ui .formpay-unified-label {
    background: #f5f5f5 !important;
    color: #000 !important;
    font-weight: bold !important;
  }

  .formpay-ui .formpay-receipt-value,
  .formpay-ui .formpay-detail-value,
  .formpay-ui .formpay-unified-value {
    color: #000 !important;
  }

  .formpay-ui .formpay-amount-value {
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #000 !important;
  }

  .formpay-ui .formpay-transaction-id {
    background: #fff !important;
    border: 1px solid #ccc !important;
  }

  .formpay-ui .formpay-gateway-name {
    color: #000 !important;
    font-weight: bold !important;
  }

  /* Hide unnecessary elements when printing */
  .formpay-ui .formpay-ui-card__action {
    display: none !important;
  }

  /* Hide transaction details when printing receipt only */
  .formpay-ui .formpay-transaction-details {
    display: none !important;
  }

  /* Hide payment status when printing receipt only */
  .formpay-ui .formpay-payment-status {
    display: none !important;
  }

  /* Ensure good print layout */
  .formpay-ui .formpay-receipt-table,
  .formpay-ui .formpay-details-table,
  .formpay-ui .formpay-unified-table {
    page-break-inside: avoid;
  }

  .formpay-ui .formpay-payment-result-card {
    page-break-inside: avoid;
    margin-bottom: 2cm;
  }

  /* Print only receipt styles */
  @media print {
    .formpay-ui .formpay-payment-result:not(.print-receipt-only) .formpay-transaction-details,
    .formpay-ui .formpay-payment-result:not(.print-receipt-only) .formpay-payment-status {
      display: block !important;
    }
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .formpay-ui .formpay-payment-result {
    padding: var(--formpay-space-2);
  }

  .formpay-ui .formpay-receipt-label,
  .formpay-ui .formpay-detail-label,
  .formpay-ui .formpay-unified-label {
    width: 50%;
    padding: var(--formpay-space-2) var(--formpay-space-3);
  }

  .formpay-ui .formpay-receipt-value,
  .formpay-ui .formpay-detail-value,
  .formpay-ui .formpay-unified-value {
    padding: var(--formpay-space-2) var(--formpay-space-3);
  }

  .formpay-ui .formpay-payment-status {
    flex-direction: column;
    text-align: center;
    gap: var(--formpay-space-2);
  }

  .formpay-ui .formpay-ui-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--formpay-space-2);
  }

  .formpay-ui .formpay-ui-card__action {
    align-self: center;
  }
}

/* Copy Button Styles */
.formpay-ui .formpay-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius-sm);
  background: var(--color-formpay-light-bg);
  color: var(--color-formpay-dark-text);
  font-size: 0.75rem;
  font-weight: var(--formpay-font-weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: var(--formpay-space-2);
  vertical-align: middle;
}

.formpay-ui .formpay-copy-btn:hover {
  background: var(--color-formpay-primary);
  color: #fff;
  border-color: var(--color-formpay-primary);
}

.formpay-ui .formpay-copy-btn--success {
  background: var(--formpay-status-success-bg);
  color: var(--formpay-status-success-fg);
  border-color: var(--formpay-status-success-brd);
}

.formpay-ui .formpay-copy-btn--error {
  background: var(--formpay-status-danger-bg);
  color: var(--formpay-status-danger-fg);
  border-color: var(--formpay-status-danger-brd);
}

/* Receipt Code Container */
.formpay-ui .formpay-receipt-code {
  display: inline-flex;
  align-items: center;
  gap: var(--formpay-space-2);
  font-family: monospace;
  font-weight: var(--formpay-font-weight-medium);
  background: var(--color-formpay-light-bg);
  padding: var(--formpay-space-1) var(--formpay-space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-formpay-border);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .formpay-ui .formpay-ui-card__header { flex-direction: column; align-items: flex-start; gap: var(--formpay-space-2); }
  .formpay-ui .tablenav { flex-direction: column; gap: var(--formpay-space-2); }
}