/**
 * Inscape Invitations Page Styles
 *
 * Styles for project invitation acceptance flow.
 *
 * @package PCC_Woo
 * @since 1.3.0
 */

/* ========================================
   Invitations Page Layout
   ======================================== */
.invitations-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ins-space-6, 24px);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.invitations-container {
  width: 100%;
  max-width: 480px;
}

.invitations-container--wide {
  max-width: 640px;
}

/* ========================================
   Invitation Card
   ======================================== */
.invitation-card {
  background: var(--ins-white, #fff);
  border-radius: var(--ins-radius-2xl, 24px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: var(--ins-space-8, 32px);
  text-align: center;
}

.invitation-card--expired,
.invitation-card--error {
  border: 2px solid var(--ins-status-error, #ef4444);
}

.invitation-card--warning {
  border: 2px solid var(--ins-status-warning, #f59e0b);
}

/* ========================================
   Invitation Icon
   ======================================== */
.invitation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--ins-space-6, 24px);
  background: linear-gradient(
    135deg,
    var(--ins-primary-50, #e0f2fe) 0%,
    var(--ins-primary-100, #bae6fd) 100%
  );
  border-radius: 50%;
  color: var(--ins-primary-600, #0284c7);
}

.invitation-icon--success {
  background: linear-gradient(
    135deg,
    var(--ins-status-success-light, #dcfce7) 0%,
    #bbf7d0 100%
  );
  color: var(--ins-status-success, #22c55e);
}

.invitation-icon--error {
  background: linear-gradient(
    135deg,
    var(--ins-status-error-light, #fee2e2) 0%,
    #fecaca 100%
  );
  color: var(--ins-status-error, #ef4444);
}

.invitation-icon--warning {
  background: linear-gradient(
    135deg,
    #fef3c7 0%,
    #fde68a 100%
  );
  color: var(--ins-status-warning, #f59e0b);
}

/* ========================================
   Invitation Content
   ======================================== */
.invitation-title {
  font-size: var(--ins-text-2xl, 1.5rem);
  font-weight: var(--ins-font-bold, 700);
  color: var(--ins-gray-900, #111827);
  margin: 0 0 var(--ins-space-6, 24px);
}

.invitation-details {
  background: var(--ins-gray-50, #f9fafb);
  border-radius: var(--ins-radius-xl, 16px);
  padding: var(--ins-space-5, 20px);
  margin-bottom: var(--ins-space-6, 24px);
  text-align: left;
}

.invitation-details p {
  margin: 0 0 var(--ins-space-3, 12px);
  font-size: var(--ins-text-sm, 0.875rem);
  color: var(--ins-gray-600, #4b5563);
}

.invitation-details p:last-child {
  margin-bottom: 0;
}

.invitation-details strong {
  color: var(--ins-gray-900, #111827);
  font-weight: var(--ins-font-semibold, 600);
}

.invitation-message {
  margin-bottom: var(--ins-space-6, 24px);
}

.invitation-message p {
  font-size: var(--ins-text-base, 1rem);
  color: var(--ins-gray-600, #4b5563);
  line-height: 1.6;
  margin: 0 0 var(--ins-space-3, 12px);
}

.invitation-message p:last-child {
  margin-bottom: 0;
}

.invitation-message--highlight {
  background: var(--ins-primary-50, #e0f2fe);
  border-radius: var(--ins-radius-lg, 12px);
  padding: var(--ins-space-4, 16px);
}

.invitation-message--highlight p {
  color: var(--ins-primary-800, #075985);
}

.invitation-message--warning {
  background: #fef3c7;
  border-radius: var(--ins-radius-lg, 12px);
  padding: var(--ins-space-4, 16px);
  text-align: left;
}

.invitation-message--warning p {
  color: #92400e;
}

.invitation-email-compare {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ins-space-2, 8px);
  align-items: center;
}

.invitation-email-compare .email-label {
  font-weight: var(--ins-font-medium, 500);
  min-width: 140px;
}

.invitation-email-compare .email-invited {
  color: var(--ins-primary-700, #0369a1);
  word-break: break-all;
}

.invitation-email-compare .email-current {
  color: var(--ins-status-error, #ef4444);
  word-break: break-all;
}

.invitation-hint {
  margin-top: var(--ins-space-4, 16px);
  font-size: var(--ins-text-sm, 0.875rem);
  color: var(--ins-gray-500, #6b7280);
  font-style: italic;
}

/* ========================================
   Invitation Actions
   ======================================== */
.invitation-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ins-space-3, 12px);
}

.invitation-actions .btn {
  width: 100%;
  padding: var(--ins-space-4, 16px) var(--ins-space-6, 24px);
  font-size: var(--ins-text-base, 1rem);
  font-weight: var(--ins-font-semibold, 600);
  border-radius: var(--ins-radius-xl, 16px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ins-space-2, 8px);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.invitation-actions .btn-primary {
  background: var(--ins-primary-600, #0284c7);
  color: var(--ins-white, #fff);
}

.invitation-actions .btn-primary:hover {
  background: var(--ins-primary-700, #0369a1);
  transform: translateY(-1px);
}

.invitation-actions .btn-primary:disabled {
  background: var(--ins-gray-300, #d1d5db);
  cursor: not-allowed;
  transform: none;
}

.invitation-actions .btn-secondary {
  background: var(--ins-white, #fff);
  color: var(--ins-gray-700, #374151);
  border: 1px solid var(--ins-gray-300, #d1d5db);
}

.invitation-actions .btn-secondary:hover {
  background: var(--ins-gray-50, #f9fafb);
  border-color: var(--ins-gray-400, #9ca3af);
}

/* ========================================
   Spinner
   ======================================== */
.spinner-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

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

/* ========================================
   Invitations List (Pending)
   ======================================== */
.invitations-heading {
  font-size: var(--ins-text-2xl, 1.5rem);
  font-weight: var(--ins-font-bold, 700);
  color: var(--ins-gray-900, #111827);
  margin: 0 0 var(--ins-space-6, 24px);
}

.invitations-list {
  display: flex;
  flex-direction: column;
  gap: var(--ins-space-4, 16px);
}

.invitation-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ins-space-4, 16px);
  background: var(--ins-white, #fff);
  border-radius: var(--ins-radius-xl, 16px);
  padding: var(--ins-space-5, 20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.invitation-list-info h3 {
  font-size: var(--ins-text-base, 1rem);
  font-weight: var(--ins-font-semibold, 600);
  color: var(--ins-gray-900, #111827);
  margin: 0 0 var(--ins-space-2, 8px);
}

.invitation-list-info p {
  font-size: var(--ins-text-sm, 0.875rem);
  color: var(--ins-gray-600, #4b5563);
  margin: 0 0 var(--ins-space-1, 4px);
}

.invitation-list-info p:last-child {
  margin-bottom: 0;
}

.invitation-list-actions .btn-sm {
  padding: var(--ins-space-2, 8px) var(--ins-space-4, 16px);
  font-size: var(--ins-text-sm, 0.875rem);
}

/* ========================================
   Loading State
   ======================================== */
.loading-state {
  text-align: center;
  padding: var(--ins-space-12, 48px);
}

.loading-state .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ins-gray-200, #e5e7eb);
  border-radius: 50%;
  border-top-color: var(--ins-primary-600, #0284c7);
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--ins-space-4, 16px);
}

.loading-state p {
  font-size: var(--ins-text-sm, 0.875rem);
  color: var(--ins-gray-500, #6b7280);
  margin: 0;
}

/* ========================================
   Mobile Responsive
   ======================================== */
@media (max-width: 480px) {
  .invitations-page {
    padding: var(--ins-space-4, 16px);
    align-items: flex-start;
    padding-top: var(--ins-space-8, 32px);
  }

  .invitation-card {
    padding: var(--ins-space-6, 24px);
    border-radius: var(--ins-radius-xl, 16px);
  }

  .invitation-icon {
    width: 64px;
    height: 64px;
  }

  .invitation-icon svg {
    width: 32px;
    height: 32px;
  }

  .invitation-title {
    font-size: var(--ins-text-xl, 1.25rem);
  }

  .invitation-list-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .invitation-list-actions {
    width: 100%;
  }

  .invitation-list-actions .btn {
    width: 100%;
  }
}