/* Settings Page Styles */

.settings-container {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.settings-container .content-box {
  margin-bottom: 0;
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-2xl) 0;
}

/* Units Section */
.units-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0 0 0;
}

.units-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.units-select {
  background: var(--color-surface);
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 8px 28px 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  min-width: 250px;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background-color 0.2s ease, color 0.2s ease;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}

.units-select:hover {
  background-color: var(--color-surface-hover);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.units-select:focus {
  outline: none;
  background-color: var(--color-surface-hover);
}

/* Billing Section */
.billing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.billing-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.billing-actions {
  margin-top: var(--spacing-2xl);
}

.billing-portal-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.portal-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.portal-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-md) 0;
}

.btn-external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: fit-content;
}

.btn-full-width {
  width: 100%;
}

.external-icon {
  width: 16px;
  height: 16px;
}

/* Settings Actions */
.settings-actions {
  display: flex;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-3xl);
}

.settings-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-actions .btn-secondary {
  background: var(--color-error);
  color: white;
  border: none;
}

.settings-actions .btn-secondary:hover {
  background: #b91c1c;
}

.btn-secondary {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-base);
}

.btn-secondary:hover {
  background: var(--color-border);
}

/* Delete Account Modal */
.delete-account-modal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.warning-text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  width: fit-content;
}

.status-trial {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.status-subscribed {
  background: #d4edda;
  color: var(--color-success);
}

.status-expired {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.status-cancelled {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.btn-danger {
  background: var(--color-error);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-base);
}

.btn-danger:hover {
  background: #b91c1c;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .settings-container {
    max-width: 100%;
  }

  .billing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}